<template>
	<echartBox title="安检进度" width="628px" height="362px">
		<div class="security-check-container">
			<div class="security-check-summary">
				<div class="security-check-count">
					<div class="security-check-title">完成情况</div>
					<div class="security-check-value">{{ securityData.totalCount }}<span class="security-check-unit">%</span></div>
				</div>
				<!-- <div class="security-check-completion">
					<div class="security-check-title">完成情况</div>
					<div class="security-check-value">{{ securityData.completionRate }}<span class="security-check-unit">%</span></div>
				</div> -->
			</div>
			<div class="progress-bar">
				<div class="progress-fill" :style="{ width: securityData.completionRate + '%' }"></div>
			</div>
			<div class="security-check-details">
				<div class="security-detail-item">
					<div class="security-detail-icon"><img src="../../images/ico-Dnajzs.png" alt="安检总数" /></div>
					<div class="security-detail-content">
						<div class="security-detail-label">当年安检总数</div>
						<div class="security-detail-value">{{ securityData.yearlyTotal }}<span class="security-detail-unit">户</span></div>
					</div>
				</div>
				<div class="security-detail-item">
					<div class="security-detail-icon"><img src="../../images/ico-Ywcajs.png" alt="已完成安检" /></div>
					<div class="security-detail-content">
						<div class="security-detail-label">已完成安检数</div>
						<div class="security-detail-value completed">{{ securityData.completedCount }}<span class="security-detail-unit">件</span></div>
					</div>
				</div>
			</div>
		</div>
	</echartBox>
</template>

<script>
import echartBox from "./echart-box.vue";
export default { name: "pcPage1ItemBox8", components: { echartBox }, props: { securityData: { type: Object, required: true, default: () => ({ totalCount: 999999, completionRate: 58, yearlyTotal: 10000, completedCount: 5800 }) } }, methods: { initChart() { /* 无图表 */ } } };
</script>

<style scoped lang="scss">
$primary-color: #fff;
$secondary-color: rgba(255, 255, 255, 0.8);
$security-border-color: rgba(0, 212, 255, 0.3);
$security-text-color: #00d4ff;
$security-completion-color: #ffff00;
$security-unit-font-size: 17px;
$security-title-font-size: 17px;
$security-value-font-size: 38px;

.security-check-container { width: 84%; height: 100%; padding: 16px; display: flex; flex-direction: column; padding-left: 8%; }
.security-check-summary { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 16px; width: 100%; }
.security-check-title { font-size: $security-title-font-size; color: $primary-color; margin-bottom: 4px; }
.security-check-value { font-size: $security-value-font-size; font-weight: bold; text-shadow: 0 0 10px rgba(0, 212, 255, 0.5); }
.security-check-unit { font-size: $security-unit-font-size; margin-left: 5px; color: $secondary-color; }
.security-check-count .security-check-value { color: $security-text-color; }
.security-check-completion .security-check-value { color: $security-completion-color; }
.progress-bar { width: 100%; height: 12px; background-color: rgba(0, 34, 61, 0.8); border-radius: 12px; overflow: hidden; margin-bottom: 6px; box-shadow: inset 0 0 5px rgba(0,0,0,0.5); }
.progress-fill { height: 100%; background: linear-gradient(to right, #00d4ff, #0099cc); border-radius: 12px; transition: width 1s ease; box-shadow: 0 0 10px rgba(0, 212, 255, 0.7); }
.security-check-details { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.security-detail-item { display: flex; align-items: center; border-radius: 5px; padding: 14px; border: 1px solid $security-border-color; }
.security-detail-icon { width: 36px; height: 36px; margin-right: 14px; display: flex; align-items: center; justify-content: center; }
.security-detail-icon img { width: 100%; height: 100%; object-fit: contain; }
.security-detail-content { flex: 1; display: flex; justify-content: space-between; align-items: center; }
.security-detail-label { font-size: $security-title-font-size; color: $primary-color; }
.security-detail-value { font-size: 26px; font-weight: bold; color: $security-text-color; }
.security-detail-value.completed { color: $security-completion-color; }
.security-detail-unit { font-size: $security-unit-font-size; margin-left: 20px; color: $secondary-color; }
</style>
